<template>
	<view  style="overflow: hidden;">
		
		<view class="box" v-for="msg in msg.merchants">
			<view class="box_left">
				<image :src="msg.logo" mode=""></image>
			</view>
			<view class="box_right">
				<view style="height: 80upx; line-height: 100upx;">名称:{{msg.merchantName}}</view>
				<view>加入时间:{{msg.createDate}}</view>
			</view>
		</view>
		
		
		<u-loadmore  class="u-l" :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:"",
				status: 'loadmore',
				page: 0,
				pageSize:10
			}
		},
		methods: {
			searchMerchantList(startIndex,pageSize){
				var postData = {
					startIndex:startIndex,
					pageSize: pageSize,
					userUuid:this.$store.state.userInfo.userUuid,
					referrer:this.$store.state.userInfo.personalPhone,
				}
				
				postData.keyArray=['REFERRER'];
				
				this.$api.request.searchMerchantList(postData,(res)=>{
					this.msg=res.body.data;
					this.msg.merchants.forEach((e,i)=>{
						e.createDate=e.createDate.split('T')[0]
					})
					if(this.msg.total<10){
						this.status = 'nomore';
					}
					console.log(this.msg)
				})
			}
		},
		mounted() {
			this.searchMerchantList(this.page,this.pageSize);
		},
		onReachBottom() {
			
			if(this.page*10 > this.msg.total) {
				this.status = 'nomore';
				return
			}else{
				this.page = ++ this.page;
				this.status = 'loading';
				this.pageSize=this.pageSize+10;
				this.searchMerchantList(this.page,this.pageSize);
			}
			

		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
	.box{
		position: relative;
		height: 150upx;
		
		background-color: #FFFFFF;
		margin: 10upx 0;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.box_left{
		position: absolute;
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		background-color: #4399FC;
		border-radius: 50%;
		text-align: center;
		font-size: 50upx;
		color: #fff;
		margin-top: 25upx;
		margin-left: 10upx;
	}
	
	.box_right{
		padding-left: 125upx;
		height: 100%;
	}
	
	.u-l .u-load-more-wrap ,.u-l .u-load-more-wrap .u-load-more-inner ,.u-l .u-load-more-wrap .u-load-more-inner .u-more-text{
		background-color: rgba(0,0,0,0)!important;
	}
</style>
